<template>
  <div class="container-fluid admin">
    <el-row>
      <el-col :span='24'>
        <el-table :data="articles" border style="width: 100%">
          <el-table-column type="index" width="80">
          </el-table-column>
  
          <el-table-column prop="title" label="标题">
          </el-table-column>
          <el-table-column width="100" label="类型">
            <template scope="scope">
              {{scope.row.visible === 1 ? '已发布' : '草稿'}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template scope="scope">
              <router-link :to="'/article/'+scope.row.url">查看</router-link>
              <router-link :to="'/admin/editArticle/'+scope.row.url">编辑</router-link>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="block">
      <el-pagination class="pagein" @current-change="changePage" :current-page.sync="page" :page-size="15" :page-count="pageCount" layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import AdminMenu from '@/components/AdminMenu'
export default {
  name: 'login',
  components: {
    AdminMenu: AdminMenu
  },
  mounted: function () {
    this.loadData()
  },
  data: function () {
    return {
      id: this.$route.params["id"] == null ? "0" : this.$route.params["id"],
      total: 0,
      page: 1,
      pageCount: 0,
      loadmore: false,
      articles: []
    }
  },
  methods: {
    changePage(num) {
      this.page = num
      this.loadData()
    },
    viewArticle(url) {
      this.$router.push('/article/' + url)
    },
    editArticle(url) {
      this.$router.push('/admin/editArticle/' + url)
    },
    loadData() {
      var vm = this
      fetch('/api/art/0/' + (this.page - 1) + '/15', {
        method: 'GET',
        mode: 'cors'
      }).then(function (response) {
        logger.log(response);
        if (response.status >= 200 && response.status < 400) {
          return response.json()
        } else {
          var error = new Error(response.statusText)
          error.response = response
          throw error
        }
      }).then(function (json) {
        logger.log(json);
        if (json && json.code == 0) {
          vm.total = parseInt(json.msg)
          vm.pageCount = Math.floor(vm.total / 15) + 1
          if (json.data && json.data.length > 0) {
            vm.articles = json.data
          }
          if (json.data == null || json.data.length < 15) {
            vm.loadmore = false
          }
        }
      })
    }
  }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.admin {
  margin: 60px auto 0 auto;
  width: 1070px;
}

.list {
  padding-left: 0;
  list-style: none;
}

.list li {
  height: auto;
  padding: 10px;
  font-size: 10px;
  text-align: center;
  background-color: #e4e1e1;
  border: 1px solid #fff;
  display: inline-block;
}

.list .icon {
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 60px;
}

.list li:hover {
  cursor: Pointer;
  color: #ffffff;
  background-color: #000000;
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.list .glyphicon-class {
  display: block;
  text-align: center;
  word-wrap: break-word;
  font-size: 26px;
}
</style>
